<!--菜单-->
<template>
  <mu-drawer @hide="handleHide" @close="handleClose" :open="open" :docked="docked" :overlay="docked" class="app-drawer"
             :zDepth="1">
    <mu-appbar :zDepth="0" class="exmaples-nav-appbar">
      <a @click="handleMenuChange('#/index')" href="#/index" class="exmaples-appbar-title">民泰科技</a>
      <!-- <mu-badge content="rc" class="exmaples-version" secondary/> -->
    </mu-appbar>
    <mu-divider/>
    <div class="exmaple-drawer-content">
      <!--<mu-list>-->
      <!--<mu-list-item  href="#/FileManager"  title="Home"/>-->
      <!--<mu-list-item href="http://vuejs.org/" target="_blank" title="Vue"/>-->
      <!--<mu-list-item href="https://material.google.com/" target="_blank" title="Material Design"/>-->
      <!--<mu-list-item href="http://www.material-ui.com/" target="_blank" title="Material-UI"/>-->
      <!--</mu-list>-->
      <!--<div class="buttons">-->
      <!--<el-button type="primary" icon="el-icon-plus" size="small" @click="">添加网络摄像机</el-button>-->
      <!--<el-button type="primary" icon="el-icon-edit" size="small" @click="">修改</el-button>-->
      <!--</div>-->
      <div>
        <el-input style="padding:5px;width: 80%" v-if='operation_ok'
                  placeholder="输入关键字进行过滤"
                  size="medium"
                  v-model="filterText">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-input style="padding:5px;width: 100%" v-else="!operation_ok"
                  placeholder="输入关键字进行过滤"
                  size="medium"
                  v-model="filterText">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="openSimpleDialog"
                   v-show="operation_ok"></el-button>
        <!--<mu-button @click="openSimpleDialog">Open Dialog</mu-button>-->
        <mu-dialog title="摄像头目录添加或修改" width="360" :open.sync="openSimple">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="目录名称" prop="floder_name">
              <el-input type="text" v-model="ruleForm.floder_name" auto-complete="off" placeholder="请输入目录名称"></el-input>
            </el-form-item>
          </el-form>
          <el-button slot="actions" flat color="primary" @click="closeSimpleDialog" size="small">关闭</el-button>
          <el-button slot="actions" flat type="primary" @click="closesubmitDialog" size="small">提交</el-button>
        </mu-dialog>
        <mu-divider/>
        <el-tree :data="data2" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode"
                 node-key="id" :default-expanded-keys="[0]"
                 ref="tree2">
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <a class="el-icon-tickets" v-if="data.type==3"
             @click="()=> append(data)">
          </a>
            <a class="el-icon-circle-plus" v-else="data.type!=3" v-show="operation_ok"
               @click="()=> append(data)">
          </a>
          <a class="el-icon-edit" v-show="operation_ok"
             @click="()=> update(node, data)">
          </a>
          <a class="el-icon-delete" v-show="operation_ok"
             @click="()=> remove(node, data)">
          </a>
        </span>
      </span>
        </el-tree>
        <mu-divider/>
      </div>
      <div>
        <table style="vertical-align: middle;text-align: center" align="center">
          <tr>
            <td colspan="3" style="width: 50px;height: 50px;vertical-align: middle;text-align: center"><span
              class="el-icon-caret-top"></span></td>
          </tr>
          <tr>
            <td style="width: 50px;height: 50px;vertical-align: middle"><span class="el-icon-caret-left"></span></td>
            <td style="vertical-align: middle;width: 80px;height: 80px;">
              <el-button circle style="width: 80px;height: 80px;"></el-button>
            </td>
            <td style="width: 50px;height: 50px;vertical-align: middle"><span class="el-icon-caret-right"></span></td>
          </tr>
          <tr>
            <td colspan="3" style="width: 50px;height: 50px;vertical-align: middle;text-align: center"><span
              class="el-icon-caret-bottom"></span></td>
          </tr>
        </table>
      </div>
    </div>
  </mu-drawer>
</template>

<script>
  import Vue from 'vue';
  import Hub from '../assets/eventBus.js';
  import {addVideoInfo, getVideolist, deleteVideoInfo, UpdatevideoInfo} from '../api/api';
  import packageJson from '../../package.json';

  let id = 1000;
  export default {
    props: {
      open: {
        type: Boolean,
        default: true
      },
      docked: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        operation_ok: this.base.operation_ok,
        ruleForm: {
          floder_name: '上海民泰',
        },
        rules: {
          floder_name: [
            {required: true, message: '请输入目录名称', trigger: 'blur'},
            //{ validator: validaePass }
          ]
        },
        openSimple: false,
        updatename: false,
        filterText: '',
        data2: [
          {
            id: 0,
            label: '智能网络监控',
            children: [{
              id: 1,
              label: '操场监控设备（一级）',
              children: [{
                id: 4,
                label: '二级 1-1',
                children: [{
                  id: 9,
                  label: '三级 1-1-1'
                }, {
                  id: 10,
                  label: '三级 1-1-2'
                }]
              }]
            }, {
              id: 2,
              label: '学门口监控设备（一级）',
              children: [{
                id: 5,
                label: '摄像头 2-1'
              }, {
                id: 6,
                label: '摄像头 2-2'
              }]
            }, {
              id: 3,
              label: '会议室录播设备（一级）',
              children: [{
                id: 7,
                label: '摄像头 3-1（二级）'
              }, {
                id: 8,
                label: '摄像头 3-2（二级）'
              }]
            }]
          }

        ],
        parent_id: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    computed: {
      lang() {
        return Vue.config.lang
      },

    },
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val);
      }
    },
    methods: {
      handleVersionChange(val) {
        if (val !== this.version) {
          var url = this.versions.indexOf(val) === 0 ? '/' : '/' + val
          window.open(url)
        }
      },
      handleClose() {
        this.$emit('close')
      },
      handleMenuChange(val) {
        this.menuVal = val
        if (this.docked) {
          window.location.hash = this.menuVal
        } else {
          this.changeHref = true
        }
        this.$emit('change', val)
      },
      handleHide() {
        if (!this.changeHref) return
        window.location.hash = this.menuVal
        this.changeHref = false
      },
      changeLang(lang) {
        Vue.config.lang = lang
        window.localStorage.setItem('lang', lang)
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      append(data) {
        this.parent_id = data.id;
        if (data.type == '2') {
          this.$router.push({path: '/Seach_ideo_add', query: {video_list_id: data.id}});
        } else if (data.type == '3') {
          this.$router.push({path: '/FileManager', query: {video_list_id: data.id}});
        } else {
          this.openSimpleDialog();
        }

//        const newChild = {id: id++, label: '新的摄像机', children: []};
//        if (!data.children) {
//          this.$set(data, 'children', []);
//        }
//        data.children.push(newChild);
      },
      update(node, data) {
        this.ruleForm.floder_name = data.label;
        this.updatename = true;
        this.parent_id = data.id;
        this.openSimpleDialog();
//        const parent = node.parent;
//        const children = parent.data.children || parent.data;
//        const index = children.findIndex(d => d.id === data.id);
//        const newChild = {id: id++, label: '更新的摄像机', children: []};
//        var i = 0
//        for (i in data) {
//          if (i == index) {
//            data[index] = newChild;
//          }
//        }

      },
      remove(node, data) {
        var _this = this;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            var deleteParams = {video_list_id: data.id};
            deleteVideoInfo(deleteParams)
              .then(responsedata => {
                let {status, data} = responsedata;
                if (status !== 200) {
                  this.$message({
                    message: '请求失败',
                    type: 'error'
                  });
                } else {
                  var descritpion = data.descritpion;
                  if (data.status == '90000') {
                    //此处删除节点
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                    //此处删除节点
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    this.initDatesousre();
                  } else {
                    this.$message({
                      type: 'error',
                      message: descritpion
                    });
                  }
                }
              })
              .catch(function (response) {
                _this.$notify.error({
                  title: '错误',
                  message: '网络请求失败'
                });
                console.log(response);
              });


          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },
      handleNodeClick(data) {
        console.log(data);
      },
      getTreeDate() {

      },
      openSimpleDialog() {
        this.openSimple = true;
      },
      closeSimpleDialog() {
        this.openSimple = false;
        this.parent_id = '';
      },
      closesubmitDialog() {
        var _this = this;
        var floder_name = this.ruleForm.floder_name;
        if (floder_name !== '' && this.updatename == false) {
          var addParams = [{video_ip: '', video_name: floder_name, video_comments: '', parent_id: _this.parent_id}];
          addVideoInfo(addParams)
            .then(responsedata => {
              //NProgress.done();
              let {status, data} = responsedata;
              if (status !== 200) {
                this.$message({
                  message: '请求失败',
                  type: 'error'
                });
              } else {
                var descritpion = data.descritpion;
                if (data.status == '90000') {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
//                  var VideoList = data.values;
                  this.initDatesousre();
                } else {
                  this.$message({
                    message: descritpion,
                    type: 'error'
                  });
                }

              }
            })
            .catch(function (response) {
              _this.$notify.error({
                title: '错误',
                message: '网络请求失败'
              });
              console.log(response);
            });

        } else if (floder_name !== '' && this.updatename == true) {
          var updateParams = {video_name: floder_name, video_list_id: this.parent_id};
          UpdatevideoInfo(updateParams)
            .then(responsedata => {
              //NProgress.done();
              let {status, data} = responsedata;
              if (status !== 200) {
                this.$message({
                  message: '请求失败',
                  type: 'error'
                });
              } else {
                var descritpion = data.descritpion;
                if (data.status == '90000') {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  var VideoList = data.values;
                  this.initDatesousre();
                } else {
                  this.$message({
                    message: descritpion,
                    type: 'error'
                  });
                }

              }
            })
            .catch(function (response) {
              _this.$notify.error({
                title: '错误',
                message: '网络请求失败'
              });
              console.log(response);
            });
          this.parent_id = '';
          this.updatename = false;
        }

        this.openSimple = false;
      },
      initDatesousre() {
        var _this = this;
        var loginParams = {};
        var jsonstr = JSON.stringify(loginParams);
        getVideolist(jsonstr)
          .then(responsedata => {
            _this.logining = false;
            //NProgress.done();
            let {status, data} = responsedata;
            if (status !== 200) {
              this.$message({
                message: '请求失败',
                type: 'error'
              });
            } else {
              var VideoList = data.values;
              var videodate = [];
              for (var i in VideoList) {
                var objitem = {id: '', label: ''};
                var vitem = VideoList[i]
                objitem.id = vitem.video_list_id;
                objitem.label = vitem.video_name;
                var children2 = vitem.children;
                var children2_date = [];
                if (children2 != null && children2 != '' && children2 != 'null' && children2.length > 0) {
                  for (var j in children2) {
                    var objitem2 = {id: '', label: ''};
                    var item2 = children2[j];
                    objitem2.id = item2.video_list_id;
                    objitem2.label = item2.video_name;
                    objitem2.type = '2';
                    var children3 = item2.children;
                    var children3_date = [];
                    if (children3 != null && children3 != '' && children3 != 'null' && children3.length > 0) {
                      for (var k in children3) {
                        var objitem3 = {id: '', label: ''};
                        var item3 = children3[k];
                        objitem3.id = item3.video_list_id;
                        objitem3.label = item3.video_name;
                        objitem3.type = '3';
                        children3_date.push(objitem3);
                      }
                      objitem2.children = children3_date;
                    }
                    children2_date.push(objitem2);
                  }
                  objitem.children = children2_date;
                }
                videodate.push(objitem);
              }
              _this.data2 = videodate;
            }
          })
          .catch(function (response) {
            _this.logining = false;
            _this.$notify.error({
              title: '错误',
              message: '网络请求失败'
            });
            console.log(response);
          });


      }
    },
    created() {
      this.getTreeDate();
    },
    mounted() {
      this.initDatesousre();
      Hub.$on('change', () => { //Hub接收事件
        this.initDatesousre();
//        this.$message({
//          message: '获取成功',
//          type: 'error'
//        });
      });
    }
  }
</script>

<style lang="less">
  @import "../../src/styles/import.less";

  .app-drawer {
    display: flex;
    flex-direction: column;
  }

  .exmaples-nav-appbar.mu-appbar {
    flex-shrink: 0;
  }

  .exmaple-drawer-content {
    flex: 1;
    .scrollable();
    .no-scrollbar();
  }

  .exmaples-appbar-title {
    color: inherit;
    display: inline-block;
  }

  .exmaples-version {
    margin-left: 10px;
    vertical-align: text-top;
  }

  .exmaples-nav-sub-header {
    padding-left: 34px;
  }

  .mu-version-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    margin-top: 8px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .mu-version-text {
    font-size: 16px;
    margin-top: 8px;
    width: 60px;
  }

  .mu-lang-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    margin-top: 8px;
    padding-left: 16px;
    padding-right: 40px;
    font-size: 16px;
  }

  .mu-lang {
    color: inherit;
    margin-left: 2px;
    margin-right: 2px;
    &:last-child {
      margin-right: 0;
    }
    &:hover,
    &.active {
      color: @accentColor;
    }

  }


</style>
